<template>
  <div :class="[`${classPrefix}`]" :style="tabContentStyle">
    <div v-show="false">
      <slot name="label"></slot>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import Config from "/src/config";
import { findComponent } from "/src/utils/tools";
import Emitter from "/src/utils/emitter";

export default {
  name: "TabContent",
  mixins: [Emitter],
  props: {
    label: {
      type: String,
      default: "",
    },
    cKey: {
      type: String,
      required: true,
    },
    disabled: Boolean,
    // 在content使用v-if时并不会按照预期的顺序进行排序，此时可以使用order属性设置顺序（此值需要大于0并且不可重复）
    order: Number,
  },
  data() {
    return {
      classPrefix: Config.classPrefix + "-tab-content",
      componentName: "TabContent",
      parentTabsComponent: findComponent(this, "Tabs"),
    };
  },
  computed: {
    labelValue() {
      let label = this.label;
      if (this.$slots.label && this.$slots.label[0].elm.outerHTML) {
        label = this.$slots.label[0].elm.outerHTML;
      }
      return label;
    },
    tabContentIndex() {
      const currentContent = this.parentTabsComponent.labelList.filter(
        (item) => {
          return item.cKey === this.cKey;
        }
      );
      let index = -1;
      if (currentContent && currentContent.length) {
        index = currentContent[0].index;
      }
      return index;
    },
    tabContentStyle() {
      return {
        visibility:
          this.tabContentIndex === this.parentTabsComponent.activeTabIndex
            ? "visible"
            : "hidden",
        order: this.tabContentIndex,
      };
    },
  },
  mounted() {
    this.triggerUpdate();
  },
  methods: {
    triggerUpdate() {
      this.$nextTick(() => {
        this.parentEmit("Tabs", "on-update-label-list");
      });
    },
  },
  beforeDestroy() {
    this.triggerUpdate();
  },
};
</script>
